<template>
  <!--  待添加弹框 -->
  <!-- 添加或修改参数配置对话框 -->
  <el-dialog :title="title" :visible.sync="noticeOpen" width="500px" append-to-body>
    <el-form label-width="80px">
      <div>
        <span>您有来自【{{ noticeOpenObj.createBy }}】的 {{ returnNotice(noticeOpenObj.noticeType) }},请阅读：</span>
      </div>
      <el-form-item label="内容：" prop="noticeContent">
        <span v-html="noticeOpenObj.noticeContent"></span>
<!--        <editor v-model="noticeOpenObj.noticeContent" :min-height="192"/>-->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="noticeOpenSubmitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      title: '',
      noticeTitle: '',
      noticeOpen: false,
      noticeOpenObj: {},
    };
  },
  methods: {
    returnNotice(val) {
      if (val == '1') {
        return '通知';
      }
      return '公告';
    },
    openDetailNoticeData(type, title, obj) {
      this.title = title;
      this.noticeOpen = true;
      this.noticeOpenObj = obj;
    },
    noticeOpenSubmitForm() {
      this.noticeOpen = false;
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.main-panel {
  margin: 0px;
  padding: 5px;

  .panel {
    border: solid 1px #cccccc;
    min-height: 100px;
    border-radius: 2px;
    margin-top: 10px;

    .title {
      font-weight: bold;
      margin-top: 10px;
      margin-left: 5px;
      padding-left: 5px;
      color: #333333;
      border-left: 5px solid rgb(254, 106, 0);
    }

    .content {
      padding: 5px;

      .goods-logo {
        width: 45px;
        height: 45px;
        border: solid 1px #cccccc;
      }

      .spec-item {
        color: #666666;
        background: #ffffff;
        border: #666666 solid 1px;
        border-radius: 20px;
        padding: 2px 8px 2px 8px;
        margin-right: 5px;
      }

      .row {
        min-height: 40px;
        verticle-align: middle;
        display: flex;
        line-height: 40px;

        .payed-status {
          color: #52c41a;
          background: #f6ffed;
          border: #b7eb8f solid 1px;
          border-radius: 20px;
          padding: 5px 8px 2px 8px;
          font-size: 90%;
        }

        .normal-status {
          color: #666666;
          background: #ffffff;
          border: #666666 solid 1px;
          border-radius: 20px;
          padding: 5px 8px 2px 8px;
          font-size: 90%;
        }
      }

      .head {
        color: rgb(164, 164, 164);
        min-width: 120px;
        text-align: right;
        display: block;
        float: left;
      }

      .control-text {
        display: block;
        background: #f5f5f5;
        border-radius: 10px;
        margin-left: 120px;
        margin-top: 5px;
        line-height: 22px;
        padding: 5px 10px 5px 10px;
      }
    }
  }
}
</style>
